<template>
  <div v-if="show" class="success-popup">
    <div class="popup-content">
      <p class="message">成功导入 {{ itemsCount }} 条警员信息</p>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

const show = ref(false);
const itemsCount = ref(0);

const triggerSuccessPopup = (count: number) => {
  itemsCount.value = count;
  show.value = true;

  // 3秒后关闭弹窗
  setTimeout(() => {
    show.value = false;
  }, 3000);
};

defineExpose({
  triggerSuccessPopup
});
</script>

<style scoped>
.success-popup {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: linear-gradient(145deg, #4CAF50, #388E3C); /* 渐变背景色 */
  color: white;
  padding: 20px 30px;
  border-radius: 12px; /* 更圆的圆角 */
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); /* 添加阴影效果 */
  font-family: 'Arial', sans-serif;
  text-align: center;
  max-width: 400px;
  width: 100%;
  z-index: 9999;
  animation: fadeIn 0.3s ease-out;
}

.popup-content {
  font-size: 18px;
  font-weight: 600;
}

.message {
  font-size: 20px;
  margin: 0;
}

@keyframes fadeIn {
  0% {
    opacity: 0;
    transform: translate(-50%, -40%);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%);
  }
}
</style>
